<template>
  <div>
    <el-container>
      <el-header style="background-color: #99a9bf;height: 40px">欢迎：{{customerName}}
        <span>
           如有疑问随时联系：{{linkmantel}}
        </span>
        <el-button @click="logout" type="danger" style="float:right">退出</el-button>
      </el-header>

      <el-main style="background-color: #d3dae6;height: 700px">
        <el-row :gutter="20">
          <el-col :span="8" v-for="order in orderList">
            <div class="grid-content bg-purple">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>{{order.code}}</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="PayMoney(order.id)">支付</el-button>
              </div>
              <div>
                <div style="height: 30px">
                  甲方 : <span>{{order.customerName}}</span>
                </div>
                <div style="height: 30px">
                  乙方 : <span>ERP报价</span>
                </div>
                <div style="height: 30px">
                  订单创建时间 :
                  <span>{{order.createDate|DateFit}}</span>
                </div>
                <div style="height: 30px">
                  订单联系人 : <span>{{order.linkmanName}}</span>
                </div>
                <div style="height: 30px">
                  订单总价 : <span>{{order.price}}</span>
                </div>

              </div>
            </el-card>
          </div>
          </el-col>
          <el-col :span="12"><div class="grid-content bg-purple">
          </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>

    <!--点击支付查看支付详情-->
    <el-dialog title="支付详细" :visible.sync="dialogTableVisible" width="70%">
      <el-table :data="PayDetail">
        <el-table-column property="code" label="订单编号" width="200"></el-table-column>
        <el-table-column property="customerName" label="名称" width="150"></el-table-column>
        <el-table-column property="taxRate" label="税率" width="100"></el-table-column>
        <el-table-column property="price" label="合计"></el-table-column>
        <el-table-column property="priceIt" label="总计（含税）"></el-table-column>
        <el-table-column property="technologyDate" label="制作时间"></el-table-column>
      </el-table>
    </el-dialog>


  </div>
</template>

<script>
  import moment from 'moment'
    export default {
        name: "CustomerHome",
      data(){
          return{
            customerName:'',
            linkmantel:'',
            OrderCode:'',
            orderList:[

            ],
            userid:'',
            dialogTableVisible:false,
            PayDetail:{}
          }
      },
      methods:{
        logout:function () {
          sessionStorage.removeItem("user");
          this.$router.push('/customerLogin');
        },
        /*getOrderCode:function () {
          let userId = JSON.parse(sessionStorage.getItem("user"));
          this.$http.post("/customerLogin/getOrderById/"+userId).then((res)=>{
            this.OrderCode = res.data.result.code;
            }
          )
        },*/
        getOrderList:function () {
          this.$http.post("/customerLogin/getOrder/"+this.userid).then((res)=>{
              debugger;
              this.orderList= res.data.result;
            }
          )
        },
        PayMoney:function (id) {
          this.dialogTableVisible = true;
          this.$http.post("/customerLogin/getOrderByOId/"+id).then((res)=>{
            debugger;
            this.PayDetail = res.data.result;
            }
          )
        }
      },
      mounted() {
          debugger;
          let user = JSON.parse(sessionStorage.getItem("user"));
          this.userid = user.id;
          let linkman = JSON.parse(sessionStorage.getItem("linkman"));
          let tel = linkman.tel;
          this.linkmantel = tel;
          this.customerName =user.name;
          this.getOrderList();
      },
      filters:{
        DateFit:function (val) {
          return moment(val).format("YYYY-MM-DD hh:mm:ss");
        }
      }
    }
</script>

<style scoped>

</style>
